<template>
    <div class="search-input">
      <!-- 显示的关键词 -->
      <div v-show="queryTags.length" class="tags">
        <el-tag v-for="tag in queryTags" :key="tag.key" class="search-tag" closable @close="onCloseTag(tag.key)" :type="tag.value">
          <span class="tag-label">{{tag.text}}</span>
          <span>{{tag.value}}</span>
        </el-tag>
      </div>
      <!-- 输入框 -->
      <input v-show="!queryTags.length" @blur="onInputBlur" @keydown="keyDown"
       v-model="inputValue" :placeholder="placeholder" :maxlength='60'/>

       <!-- 搜索图标 -->
      <i class="el-icon-search" @click="onSearch"></i>
    </div>
</template>

<script>
/*
  属性
    'placeholder': "输入框占位字符"
  回调事件
  'search': 点击搜索框触发事件，返回选择的所有标签数据
*/
// import {equalArr} from '@/assets/common/js/util'
import EventBus from '@/services/eventBus'
export default {
  props: ['placeholder'],
  data() {
    return {
      queryTags: [],            // tag标签数组
      inputValue: '',           // 绑定搜索输入框
      oldQueryTags: []          // 保存旧的数组,防止重复点击
    }
  },
  methods: {
    // 关闭搜索框tag处理
    onCloseTag(key) {
      let index = this.queryTags.findIndex(t => t.key === key);
      this.queryTags.splice(index, 1)
      EventBus.$emit('closeTag', key)
      this.queryTags.length === 0 && this.onSearch()
    },
    // 增加搜索tag
    appendTag(obj) {
       // 是否已存在该搜索条件，存在则改变值，不存在就添加tag条件
      let index = this.queryTags.findIndex(v => v.key === obj.key)
      index > -1 ? this.queryTags[index] = obj : this.queryTags.push(obj)
      this.queryTags.splice(0, 0)
    },
    // 回车事件
    keyDown() {
      event.keyCode === 13 && this.onInputBlur()
    },
    // 添加关键词Tag
    onInputBlur() {
      if (!this.inputValue.trim()) {
        this.inputValue = ''
        return
      }
      this.appendTag({key: 'keyword', value: this.inputValue, text: this.$I18n.keyword, keyword: this.inputValue})
      this.inputValue = ''
      this.onSearch()
    },
    // 搜索
    onSearch() {
      // 没有修改搜索条件，不必调用执行搜索
      // if (equalArr(this.oldQueryTags, this.queryTags)) return
      // 保存当此搜索的条件
      this.oldQueryTags = JSON.parse(JSON.stringify(this.queryTags))
      // 将搜索的键放入一个对象
      let res = {}
      this.queryTags.forEach(v => {
        Object.keys(v).forEach((key) => {
          if (key !== 'text' && key !== 'value' && key !== 'key') {
            res[key] = v[key]
          }
        })
      })
      this.$emit('search', res)
    }
  },
  mounted() {
    // 监听父组件的append回调，执行添加tags标签
    this.$nextTick(() => {
      this.$on('append', obj => {
        this.appendTag(obj)
      })
    })
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.search-input
  width 800px
  border-bottom 1px solid #ccc
  display flex
  align-items center
  flex-wrap wrap
  position relative
  padding-right 20px

  .tags
    width 100%
    height 32px

  .el-tag
    margin-right 10px

    .el-icon-close:before 
      content: "\e60c"
  
  .tag-label
    padding: 2px
    border-radius: 5px
    margin-right: 5px
    background: #ccc

  input
    width 100%
    height 32px
    line-height 32px
    border none
    outline none
    font-size 13px

  .el-icon-search
    font-size 17px
    color #666
    cursor pointer
    position absolute
    right 0
    &:hover
      transform scale(1.1)
</style>
